<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // document.querySelectorAll 查
      // document.setattribute(属性，属性值) 改
      // 元素.remove()  删
      //
      //       document.createElement("a")
      // document.body.appendChild  增
      var aaa = 20;
    </script>
    <script>
      // 1
      // 理解 DOM、BOM、ECMAScript这个三个
      // 参考链接1：https://blog.csdn.net/weixin_47432345/article/details/126211808
      // 参考链接2：https://blog.csdn.net/libingjiedd/article/details/136645439

      //       DOM(文档对象模型)
      //       DOM树：每个标签也是元素，元素存在的相互关系，形成dom树

      // 2
      // 搞明白URL是什么？如地址：https://www.baidu.com/s?wd=DOM和BOM&key1=参数1&key2=value2
      // 统一资源定位系统

      // https：是什么？协议
      // www：是什么？万维网
      // baidu：是什么？域名
      // com：是什么？顶级域名
      // /s：是什么？路径可指向具体的文件或目录
      // ?wd=DOM和BOM&key1=参数1&key2=参数2：是什么？【地址栏URL参数】
      // 端口号：是什么？如：http://127.0.0.1:5500/a.html
      // 127.0.0.1 和 localhost：是什么？localhost：本地主机名称
      // 127.0.0.1：ipv4地址，回环地址
      // 参考链接：https://www.dlz123.cn/zs/seo/13981.html

      // 3
      // 封装一个方法（即封装一个函数）可以获取地址栏参数，并返回以键值对的形式返回，即返回一个对象
      // 如：URL为：https://www.baidu.com/s?wd=DOM和BOM&key1=参数1&key2=value2，函数返回一下obj
      // https://www.baidu.com/s?wd=DOM%E5%92%8CBOM&key1=%E5%8F%82%E6%95%B01&key2=value2
      const obj = {
        wd: "DOM和BOM",
        key1: "参数1",
        key2: "value2",
      };
      var result = {};
      var querys = window.location.search.substring(1).split("&");

      querys.forEach(function (item, index) {
        var a = item.split("=");
        var b = index;
        var key = window.decodeURIComponent(a[0]);
        var value = window.decodeURIComponent(a[1]);
        result[key] = value;
        console.log(a);
      });
      console.log(result);
      // encodeURIComponent
      // todo-------自己声明函数并调用查看是否准确-----------
      // 提示：window.location、window.decodeURIComponent、字符串的方法、数组循环、对象动态赋值

      // 4
      // 去理解：一个页面从输入URL到页面加载显示完成，这个过程发生了什么？
      // 参考连接：https://www.kancloud.cn/maryong/maryong/1770627

      // 5
      // 什么是函数作用域、全局作用域、
      // 什么是函数作用域链
      // 什么垃圾回收？什么时候会垃圾回收
      function fn1() {
        var a1 = 10;
        var b1 = 100;
        var a2 = 1000;
        b2 = 10000;
        // window.b2 = 1000
        function fn2(a2) {
          return ++a2;
        }

        function fn3(a3) {
          a3++;
        }

        function fn4(a4) {
          return a4 + a2;
        }
        function fn5(b2) {
          console.log(b2, window.b2);
          return b2 + window.b2;
        }

        a1 = fn2(a1); //11
        b1 = fn3(b1); //100
        a2 = fn4(a2); //2000
        // b2 = fn5(); //10000
        var b3 = fn5(10); //10010
        console.log(a1, a2, b1, b2, b3);
        // 说出 a1、a2、b1、b2、b3的值是多少
      }

      fn1();

      // 6
      // 什么是构造函数、原型、原型链？
      // 构造函数通过什么属性指向原型？
      // 原型通过什么属性指向构造函数？
      // 原型的作用是什么？
    </script>
  </body>
</html>
